<template>
    <div class="allEvaluate flexv">
        <pub-head title="全部评价"></pub-head>
        <div class="head ali-c" v-if="data">
            <div class="flex head-items">
                <div class="item direct flex1 tc bold click" :class="{'on':  myType== 0}" @click="type(0)">全部({{count_0}})</div>
                <div class="item direct flex1 tc bold click" :class="{'on': myType == 1}" @click="type(1)">好评({{count_1}})</div>
        		<div class="item direct flex1 tc bold click" :class="{'on':  myType== 2}" @click="type(2)">中评({{count_2}})</div>
        		<div class="item direct flex1 tc bold click" :class="{'on': myType == 3}" @click="type(3)">差评({{count_3}})</div>
        	</div>
        </div>
		<div v-if="list.length!=0">
			<div class="fix_space"></div>
			<!-- 列表 -->
			
			<list v-model="loading" :finished="finished" :immediate-check="true"
			finished-color="#999" finished-text='没有更多了咯~'   @load="get()" >
			   <!-- 商品评价 -->
			   <div class="evaluates flexv mt2">
			       <!-- 评价 -->
			       <div class="evaluate flexv" v-for="(item1,index1) in list" :key="index1">
			           <div class="top ali-c">
			               <img :src="item1.user_head" class="user_img" alt="">
			               <div class="rights flexv">
			                   <p class="user_name">{{item1.user_name}}</p>
			                   <div class="ali-b">
			                       <p class="spec">{{getDate_2('yyyy-mm-dd',item1.add_time)}}</p>
			                       <div class="star_box flex">
			                           <img src="@/assets/icon_up.png" v-for="item3 in item1.star_num" :key="item3" alt="">
			                       </div>
			                   </div>
			               </div>
			           </div>
			           <!-- 评价内容 -->
			           <div class="evaluate_text mt2">{{item1.content}}</div>
			           <!-- 评价图片 -->
			           <div class="evaluate_imgs mt2">
			               <img :src="item2" @click="getImg(item1.images,index2)" class="img" alt=""  v-for="(item2,index2) in item1.images" :key="index2">
			           </div>
			       </div>
			   </div>
			</list>
		</div>
        
        <!--为空提示-->
        <div class="empty_box flexv flexc" v-else>
            <img src="@/assets/cash_withdrawal.png" alt="">
            <p class="tc">还未有此类型评价~</p>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import pubHead from '@/components/head';
import { EvaluateList } from '@/request/api';
import list from '@/components/listLoad/listLoad';
import { Toast,ImagePreview } from 'vant'; 
export default {
    data(){
        return{
            data: null, // 所有数据
            isNone: false, // 
            emptyIco: require('@/assets/cash_withdrawal.png'),// 为空图片
            ths: 30, // 邀请类型 30直接邀请 40间接邀请
            thss: 1, // 会员类型 1有效 2无效
            list: [], //
            // typenum:41, //类型
            page:1,//多少页
            pagesize:20,
            loading: true,
            finished: false,
            isEmpty: false,//列表是否为空
			myType:0,//会员类型 1 直推 2 间推
			pcount:'',
			spcount:'',
			goodsType:null,
			goodsId:null,
			count_0:0,
			count_1:0,
			count_2:0,
			count_3:0,
        }
    },
    components: {
        pubHead,
        list
    },
    created(){
		this.goodsType = this.$route.query.id;
		this.goodsId = this.$route.query.type;
        this.get()
    },
    filters:{
        time(e){
            var time=new Date(e*1000)
            var year=time.getFullYear()
            var month=time.getMonth() > 10 ? time.getMonth() : '0'+ time.getMonth()
            var day=time.getDay() > 10 ? time.getDay() : '0'+ time.getDay()
            time=year+'-'+month+'-'+day
            return time
        }
    },
    watch: {},
    methods: {
        get(){
            this.$loading()
                EvaluateList({
                   token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
                    star:this.myType,
                    pagesize:20,
                    page:this.page,
					item_type:this.goodsType,
					id:this.goodsId
                }).then(res=>{
                    this.data = res.data;
                    if (res.data.comment.length >0) {
                        this.list = [...this.list, ...res.data.comment];
						this.count_0 = res.data.all_count
						this.count_1 = res.data.good_count
						this.count_2 = res.data.middle
						this.count_3 = res.data.bad_count
                    }
                    this.loading = false;
                    this.finished = Number(res.data.comment.length) < Number(this.pagesize);
                    this.isNone = this.list.length == 0;
                    this.isEmpty = this.list.length == 0
                    this.page++;
					Toast.clear()
                })
        },
		getImg(images,index){
		      ImagePreview({
		          images:images,
		          showIndex:true,
		          loop:false,
		          startPosition:index
		 })
		 },
        // 返回
        back(){
            this.$router.go(-1)
        },
        // 邀请类型
        type(val){
            if (!this.loading) {
                this.list=[]
                this.myType = val
                this.page = 1
                this.get()
            }else{
                this.$Tip('您点击的太快啦T_T')
            }
        },
        // 会员类型
        thisItem(val){
            if (!this.loading) {
                this.list=[]
                this.page = 1
                this.thss = val
                this.get()
            }else{
                this.$Tip('您点击的太快啦T_T')
            }
        },
        // 时间转换
        timestampToTime(timestamp) {
            var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '年';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '月';
            var D = (date.getDate() < 10 ? '0' +date.getDate() : date.getDate()) + '日';
            return Y+M+D;
        },
		//转换年月日方法
		getDate_2(format, str) {
			let oTime = null;
			let newStr = str * 1000;
			var oDate = new Date(newStr),
				oYear = oDate.getFullYear(),
				oMonth = oDate.getMonth() + 1,
				oDay = oDate.getDate(),
				oHour = oDate.getHours(),
				oMin = oDate.getMinutes(),
				oSec = oDate.getSeconds()
			if (format == 'yyyy-mm-dd') {
				oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
			} else if (format == 'yyyy/mm/dd') {
				oTime = oYear + '/' + this.getzf(oMonth) + '/' + this.getzf(oDay)
			}
			return oTime;
		},
		//补0操作  
		getzf(num) {
			if (parseInt(num) < 10) {
				num = '0' + num;
			}
			return num;
		},
    }
}
</script>
<style lang="less" scoped>
.allEvaluate{
    min-height: 100vh;
    background-color: #fff;
    .head{
        width: 100%;
        max-width: 750px;
        // height: 0.88rem;
        margin: auto 0;
        position: fixed;
        z-index: 100;
        top: 0.88rem;
		
        background-color: #fff;
		padding: 0.24rem;
		font-size: 0.3rem;
		line-height: 0.8rem;
		color: #333;
		background-color: #fff;
        .head-items{
            width: 7rem;
            height: 0.68rem;
            margin: auto;
            border-radius: 0.34rem;
            font-size: 0.28rem;
            line-height: 0.66rem;
            color: #53AB2A;
            overflow: hidden;
            .item{
                border: 1px solid #53AB2A;
            }
            .direct{
                border-radius: 0.34rem;
				margin-right: 0.2rem;
            }
            .indirect{
                border-radius: 0.34rem;
            }
            .on{
                color: #fff;
                background-color: #53AB2A;
            }
        }
	}
		
    .items{
        width: 100%;
        max-width: 750px;
        height: 0.9rem;
        margin: auto 0;
        position: fixed;
        z-index: 100;
        top: 1.76rem;
        font-size: 0.28rem;
        line-height: 0.9rem;
        color: #333;
        border-top: 1px solid #e1e1e1;
        background-color: #fff;
        .item{
            border-bottom: 0.04rem solid transparent;
        }
        .this{
            border-color: #ff2e2e;
            color: #ff2e2e;
        }
    }
    // 占位符
    .fix_space{
        width: 100%;
        height: 0.88rem;
		background-color: #fff;
    }
    
    .empty_box{
        height: calc(100vh - 1.76rem);
        img{
            width: 3.24rem;
            height: 3.06rem;
        }
        p{
            margin-top: 0.3rem;
            font-size: 0.3rem;
            line-height: 120%;
            color: #999;
        }
    }
    // 商品评价
    .evaluates{
        padding: 0 0.3rem;
        background-color: #fff;
        .evaluate_head{
            height: 0.8rem;
            border-bottom: 0.01rem solid #ededed;
            font-size: 0.36rem;
            font-weight: bold;
            line-height: 0.8rem;
            color: #212121;
            .right{
                font-size: 0.2rem;
                color: #666;
                span{
                    padding-right: 0.24rem;
                    background: url('~@/assets/c_rightarrow.png') no-repeat right center;
                    background-size: 0.12rem 0.22rem;
                }
            }
        }
        // 评价
        .evaluate{
            padding: 0.2rem 0;
            .top{
                .user_img{
                    width: 0.5rem;
                    height: 0.5rem;
                    margin: 0 0 auto;
                    border-radius: 100%;
                    overflow: hidden;
                }
                .rights{
                    margin-left: 0.2rem;
                    .user_name{
                        font-size: 0.26rem;
                        line-height: 120%;
                        color: #333;
                    }
                    .spec{
                        margin-top: 0.1rem;
                        font-size: 0.2rem;
                        line-height: 120%;
                        color: #b2b2b2;
                    }
                    .star_box{
                        margin-left: 0.2rem;
                        img{
                            width: 0.2rem;
                            height: 0.2rem;
                            margin: 0 0.02rem;
                        }
                    }
                }
            }
            .evaluate_text{
                margin-left: 0.56rem;
                font-size: 0.24rem;
                line-height: 150%;
                color: #333;
            }
            .evaluate_imgs{
				display: flex;
                margin-left: 0.56rem;
                .img{
                    width: 2rem;
                    height: 2rem;
                    margin: 0.16rem 0.14rem 0 0;
                    border-radius: 0.1rem;
                }
                .img:nth-child(3n){
                    margin-right: 0;
                }
            }
        }
    }
}
</style>

